<template>
	<div>
		<div class="card" :class="{bg:type=='1',bg1:type=='2',bg2:type=='3'}">
			<div>{{title}}</div>
			<div style="color: blue;">{{num}}</div>
		</div>
	</div>
</template>

<script>
	import {
		reactive,
		toRef,
		ref,
		computed,
		onMounted
	} from 'vue';
	export default {
		props: {

			title: {
				type: String,
				default: ''
			},
			num: {
				type: String,
				default: ''
			},
			type: {
				type: String,
				default: '1'
			},
		},
		setup() {

		}
	}
</script>

<style scoped lang="scss">
	.card {
		box-shadow: 0px 0px 5px #c2c2c2;
		border-radius: 5px;
		width: auto;
		padding: 10px;
		color: #4d4d4d;
		line-height: 25px;
		text-align: center;
		/*水平居中*/
	}

	.bg {
		background-color: #8fcbff;
	}


	.bg1 {
		background-color: #56aa38;
	}

	.bg2 {
		background-color: #ff6b3a;
	}
</style>